<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-card class="card-box">
            <div class="card-title"><h3>付费人数</h3></div>
            <div class="card-content">
              <span
                >累计<b class="stronger">{{ flowstat.totalPayCount }}</b
                >人</span
              ><span
                >今日 <b class="stronger">{{ flowstat.todayPayCount }}</b
                >人</span
              >
            </div>
          </el-card>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-card class="card-box">
            <div class="card-title"><h3>付款金额</h3></div>
            <div class="card-content">
              <span
                >累计<b class="stronger">{{
                  flowstat.totalPayAmount | price
                }}</b
                >元</span
              ><span
                >今日<b class="stronger">{{
                  flowstat.todayPayAmount | price
                }}</b
                >元</span
              >
            </div>
          </el-card>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-card class="card-box">
            <div class="card-title"><h3>返现金额</h3></div>
            <div class="card-content">
              <span
                >累计<b class="stronger">{{
                  flowstat.totalReturnAmount | price
                }}</b
                >元</span
              ><span
                >今日<b class="stronger">{{
                  flowstat.todayReturnAmount | price
                }}</b
                >元</span
              >
            </div>
          </el-card>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-card class="card-box">
            <div class="card-title"><h3>实际收益</h3></div>
            <div class="card-content">
              <span
                >累计<b class="stronger">{{
                  (flowstat.totalPayAmount - flowstat.totalReturnAmount) | price
                }}</b
                >元</span
              ><span
                >今日<b class="stronger">{{ flowstat.todayEarnings | price }}</b
                >元</span
              >
            </div>
          </el-card>
        </div></el-col
      >
    </el-row>
    <div class="exportData">
      <el-button class="exportButton" type="primary" @click="exportExcel"
        >导出表格</el-button
      >
    </div>
    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="下单编号">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.payTradeno | order
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="购买用户">
          <template slot-scope="scope">
            <el-avatar size="small" :src="scope.row.headimgurl"></el-avatar>
            <span style="margin-left: 10px">{{ scope.row.nickname }}</span>
          </template>
        </el-table-column>
        <el-table-column label="返现金额" width="100" prop="royalty">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.returnAmount | price
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="邀请人">
          <template slot-scope="scope">
            <el-avatar size="small" :src="scope.row.fromHeadimgurl"></el-avatar>
            <span style="margin-left: 10px">{{ scope.row.fromNickname }}</span>
          </template>
        </el-table-column>
        <el-table-column label="交易状态" width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.pay | status }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建订单时间" width="160">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.createDate | timeFilter
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="交易时间" width="160">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.payDate | timeFilter
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="支付金额" width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.payAmount | price
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="分销返现" width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.returnAmount | price
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="返现状态" width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.returnPayoff | paystatus
            }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination
        class=" pagination"
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      >
      </el-pagination> -->
      <el-pagination
        class=" pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[100, 20, 30, 10]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { getStaflow, getIncomeList, exportData } from "../api/statflow";
import { sheet2blob, csv2sheet, openDownloadDialog } from "../utils/excel";
import XLSX from "xlsx";
export default {
  name: "Incomes",
  data() {
    return {
      flowstat: {},
      tableData: [],
      total: 0,
      pageSize: 100,
    };
  },
  filters: {
    order: function(order) {
      return order === "0" ? "-" : order;
    },
    status: function(status) {
      return status === true ? "已完成" : "待支付";
    },
    price: (price) => {
      return price / 100;
    },
    paystatus: (status) => {
      return status === 1 ? "已结算" : "-";
    },
  },
  methods: {
    getStaflow(gid) {
      getStaflow(gid).then((v) => {
        const data = JSON.parse(v.data);
        this.flowstat = data.respMsg.flowstat;
      });
    },
    getIncomeList(pageNum, gid, pageSize) {
      getIncomeList(pageNum, gid, pageSize).then((v) => {
        const data = JSON.parse(v.data);
        this.tableData = data.respMsg.list;
        this.total = data.respMsg.pagInfo.total;
      });
    },
    handleCurrentChange(val) {
      this.getIncomeList(val, this.$route.params.id, this.pageSize);
    },
    handleSizeChange(val) {
      console.log(val);
      this.pageSize = val;
      this.getIncomeList(1, this.$route.params.id, this.pageSize);
    },

    exportExcel() {
      exportData(this.$route.params.id).then((v) => {
        const data = new Uint8Array(v.data);
        const workbook = XLSX.read(data, { type: "array" });
        const sheetNames = workbook.SheetNames;
        const csv = XLSX.utils.sheet_to_csv(workbook.Sheets[sheetNames[0]]);
        const sheet = csv2sheet(csv);
        const blob = sheet2blob(sheet);
        openDownloadDialog(blob, "export.xlsx");
      });
    },
  },

  created() {
    this.getStaflow(this.$route.params.id);
    this.getIncomeList(1, this.$route.params.id, this.pageSize);
  },
};
</script>

<style scoped>
.container {
  width: 80%;
  margin: 0 auto;
}
.card-title {
  /* float: left; */
  margin-top: 10px;
}
.table {
  margin-top: 30px;
}
.pagination {
  float: right;
  margin-top: 30px;
  margin-right: 160px;
  margin-bottom: 0px;
}
.card-content {
  width: 80%;
  display: inline-flex;
  justify-content: space-between;
}
.stronger {
  font-size: 1.5em;
  color: #f56c6c;
  margin: 0 2px;
}
.exportData {
  margin-top: 20px;
  /* margin-bottom: 20px; */
  overflow: hidden;
}
.exportButton {
  float: right;
  margin-right: 60px;
}
</style>
